<template>
  <div class="phone-box">
    <div class="box-header">
      <h1 v-text="title"></h1>
      <a class="more" :href="moreLink" v-show="isMore">查看更多</a>
    </div>
    <div class="box-body">
      <div class="box-left">
        <a href="#" class="phone">
          <img v-lazy="phoneList[0].imgPath" alt="">
        </a>
      </div>
      <div class="box-right">
        <a href="javascript:;" class="phone" v-for="(item, index) in phoneList.filter((item, i) => i > 0)" :key=index>
          <img v-lazy="item.imgPath" alt="">
          <h3 class="title ellipsis">{{ item.title }}</h3>
          <p class="desc ellipsis">{{ item.desc }}</p>
          <p class="price" @click="addCart(item.id)">{{ item.price }}</p>
        </a>
      </div>
    </div>

    <mall-modal
        title="提示"
        sureText="查看购物车"
        btnType="1"
        modalType="middle"
        v-bind:showModal="showModal"
        v-on:submit="goToCart"
        v-on:cancel="showModal=false"
    >
      <template v-slot:body>
        <p>商品添加成功！</p>
      </template>
    </mall-modal>
  </div>
</template>

<script>
  import MallModal from "@/components/MallModal";
  import {addCart} from "@/api/product";
  export default {
    name: "PhoneBox",
    components: {MallModal},
    props: {
      title: {
        type: String,
        required: true
      },
      moreLink: {
        type: String,
        required: false
      },
      phoneList: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        showModal:false
      }
    },
    methods: {
      addCart(id) {
        addCart({
          productId: id,
          selected: true
        }).then(res => {
          this.showModal = true
          this.$store.dispatch("saveCartCount", res.cartTotalQuantity)
        })
      },
      goToCart() {
        this.$router.push({
          path: '/cart'
        })
      }
    },
    computed: {
      isMore() {
        return this.moreLink !== ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  .phone {
    transition: all .2s linear;
    &:hover {
      box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
      transform: translateY(-2px);
    }
  }
  .phone-box {
    .box-header {
      display: flex;
      justify-content: space-between;
      h1 {
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333;
      }
      .more {
        font-size: 16px;
        line-height: 58px;
        color: #424242;
        &:hover {
          color: #ff6700;
        }
      }
    }
    .box-body {
      display: flex;
      justify-content: space-between;
      .box-left {
        a {
          display: inline-block;
        }
      }
      .box-right {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-left: 14px;
        align-items: flex-start;
        .phone {
          display: inline-block;
          width: 234px;
          height: 300px;
          padding: 20px 20px;
          margin-bottom: 13px;
          text-align: center;
          background-color: #ffffff;
          img {
            margin-bottom: 18px;
            width: 160px;
            height: 160px;
          }
          .title {
            font-size: 14px;
            font-weight: 400;
            color: #333;
            margin-bottom: 2px;
          }
          .desc {
            margin: 0 10px 10px;
            height: 18px;
            font-size: 12px;
            color: #b0b0b0;
          }
          .price {
            color: #ff6700;
            &:after{
              display: inline-block;
              width: 22px;
              height: 22px;
              background: url('~@/assets/imgs/icon-cart-hover.png') no-repeat 50%;
              background-size: contain;
              content: " ";
              margin-left: 5px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
</style>
